<template>
  <div style="height: 100%; width: 100%">
    <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
      <div style="float: left">
        <img slot="item-icon" src="@/assets/img/little_icon/rl.png" />&nbsp;
      </div>
      <span style="font-size: 20px">日历</span>
    </div>
    <el-divider></el-divider>
    <div style="width: 100%; height: 40%">
      <ve-calendar
        v-model="selected"
        :height="height"
        :lunar="lunar"
        :event="event"
        :pick-mode="pickMode"
        :offDays="offDays"
        :mode="mode"
        :most-choice="mostChoice"
        @refresh-calendar="refreshC"
        :cross-month="crossMonth"
        @append-event="appendEvent"
        @click-event="clickEvent"
      >
        <div slot="day-event" slot-scope="{ day, popMenu }">
          <div v-if="test.indexOf(day.sDay) >= 0">
            <div @click="popMenu($event, { day, item })" style="color: red">
              {{ item }}
            </div>
          </div>
        </div>
        <div
          slot="day-event-left-menu"
          slot-scope="{ currentEvent, eventMenuShow }"
        >
          <!-- 这里如果需要调用多重包装的数据，请放到v-if里面 -->
          <div v-if="currentEvent.day">{{ currentEvent.day.sDate }}</div>
          <div
            @click="deleteEvent(currentEvent.item)"
            class="day-event-menu-item"
          >
            使用插槽控制菜单
          </div>
        </div>
        <div
          slot="day-event-right-menu"
          slot-scope="{ currentEvent, eventRightMenuShow }"
        >
          <div v-if="currentEvent.day">{{ currentEvent.day.sDate }}</div>
          <div class="day-event-menu-item">右键插槽控制菜单</div>
        </div>
      </ve-calendar>
    </div>
    <el-divider></el-divider>
    <div>
      <i class="el-icon-s-claim"></i>日程
      <i class="el-icon-circle-plus-outline"></i
      ><span style="cursor: pointer" @click="newBuild">新建</span>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import veCalendar from "ve-calendar";
export default {
  name: "Calendar",
  data() {
    return {
      value: new Date(),
      modeList: ["mini", "normal", "auto"],
      modeIndex: 0,
      mode: "",
      item: "",
      lunar: true,
      offDays: [],
      pickMode: false,
      mostChoice: 0,
      crossMonth: true,
      event: true,
      activateDate: {
        year: 2017,
        month: 6,
      },
      height: "100%",
      month: 6,
      test: [2],
      selected: [],
    };
  },
  components: {
    veCalendar,
  },
  mounted() {
    this.changeMode();
  },
  methods: {
    newBuild() {
      this.$router.push("/newmeet");
    },
    changeMode() {
      this.modeIndex++;
      this.mode = this.modeList[this.modeIndex % 3];
    },
    setOffDays() {
      this.offDays = JSON.parse(JSON.stringify(this.selected));
      this.selected = [];
    },
    refreshC(yearmonth, data) {
      console.log(yearmonth, data);
    },
    clickEvent(e, data) {
      console.log(e, data);
    },
    deleteEvent(item) {
      console.log(`你打算删除事情${item}`);
    },
    appendEvent(day) {
      console.log("appendEvent", day);
    },
  },
};
</script>

<style>
.demo-div {
  padding: 7px;
  height: 200px;
}

.demo-div div {
  margin-top: 10px;
}
</style>